<template>
  <div class="input_bContainer">
    <span class="input_basterisk">{{ i18nt.demand.dot }}</span>
    <span class="input_btext">{{ title }}</span>
    <input_c class="input_bI" v-bind="$attrs" ref="inputRef" />
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import input_c from "./input_c.vue";

const inputRef = ref<InstanceType<typeof input_c> | null>(null);

defineExpose({
  inputRef,
});

defineProps({
  title: {
    type: String,
    required: false,
    default: i18nt.value.demand.str4,
  },
});
</script>

<style scoped lang="scss">
.input_bContainer {
  @include relative_hw(50px, 714px);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .input_basterisk {
    // width: 8px;
    // height: 22px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #ff1c1c;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .input_btext {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .input_bI {
    width: 646px;
  }
}
</style>
